<template>
  <div id="exchange">
    <HeaderBg>
      <Headers :title="$t('exchange.title')"/>
    </HeaderBg>
    <div class="selectB">
      <div class="left-select">
        <div @click="showLayer('left')" v-if="!ctrlTxt.left" class="select-icon">
          <img src="../../../assets/select-icon.png" alt>
        </div>
        <div v-if="ctrlTxt.left" class="selectText">
          <span class="types">{{ctrlTxt.left}}</span>
          <span class="close" @click="ctrlTxt.left = ''">
            <img src="../../../assets/close.png" alt>
          </span>
        </div>
      </div>
      <div class="transfor-icon">
        <img src="../../../assets/transforB.png" alt>
      </div>
      <div class="right-select">
        <div @click="showLayer('right')" v-if="!ctrlTxt.right" class="select-icon">
          <img src="../../../assets/select-icon.png" alt>
        </div>
        <div v-if="ctrlTxt.right" class="selectText">
          <span class="types">{{ctrlTxt.right}}</span>
          <span class="close" @click="ctrlTxt.right = ''">
            <img src="../../../assets/close.png" alt>
          </span>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="search-btn" @click="exchageSearch">{{$t('exchange.search')}}</div>
    <!-- 展示 -->
    <div class="lists-container">
      <ul>
        <li v-for="(item,index) in transForData" :key="index">
          <div class="type-transfor">
            <span>{{item.exchanges}}</span>
            <div class="trans-icon">
              <img src="../../../assets/trans-details.png" alt>
            </div>
            <span>{{item.to}}</span>
          </div>
          <div class="transfor-details">
            <!-- 数量 -->
            <div class="tranfor-num">
              <span class="icons">
                <img src="../../../assets/success.png" alt>
              </span>
              <span>{{item.success}}{{item.exchanges}}</span>
            </div>
            <!-- 时间 -->
            <div class="trans-date">
              <span class="icons">
                <img src="../../../assets/date-icon.png" alt>
              </span>
              <span class="text">{{item.date}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 弹出层 -->
    <div class="selectType" ref="layers">
      <div class="bottoms-icon" @click="closeLayer">
        <img src="../../../assets/bottoms.png" alt>
      </div>
      <div class="layer-title">{{$t('exchange.selectBType')}}</div>
      <ul>
        <li v-for="(item,index) in Btypes" :key="index" @click="getBtypesVal(item.name)">
          <div class="img-box">
            <img :src="item.icon" alt>
          </div>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
export default {
  name: "exchange",
  data() {
    return {
      transForData: [
        {
          exchanges: "EOC",
          to: "ETH",
          success: "3.0000",
          date: "2019-07-02 18：00"
        },
        {
          exchanges: "EOC",
          to: "ETH",
          success: "3.0000",
          date: "2019-07-02 18：00"
        },
        {
          exchanges: "EOC",
          to: "ETH",
          success: "3.0000",
          date: "2019-07-02 18：00"
        },
        {
          exchanges: "EOC",
          to: "ETH",
          success: "3.0000",
          date: "2019-07-02 18：00"
        },
        {
          exchanges: "EOC",
          to: "ETH",
          success: "3.0000",
          date: "2019-07-02 18：00"
        },
        {
          exchanges: "EOC",
          to: "ETH",
          success: "3.0000",
          date: "2019-07-02 18：00"
        }
      ],
      Btypes: [
        {
          name: "ETH",
          icon: require("assets/eth_icons.png")
        },
        {
          name: "BTC",
          icon: require("assets/btc_icons.png")
        },
        {
          name: "LTC",
          icon: require("assets/ltc_icons.png")
        },
        {
          name: "XRP",
          icon: require("assets/xrp_icons.png")
        },
        {
          name: "EOC",
          icon: require("assets/eoc_icons.png")
        }
      ],
      ctrlTxt: {
        left: "",
        right: ""
      },
      statusInput: ""
    };
  },
  methods: {
    closeLayer() {
      this.$refs.layers.style.transform = "translateY(100%)";
    },
    getBtypesVal(val) {
      switch (this.statusInput) {
        case "left":
          this.ctrlTxt.left = val;
          this.closeLayer();
          break;
        default:
          this.ctrlTxt.right = val;
          this.closeLayer();
          break;
      }
    },
    showLayer(status) {
      this.$nextTick(_ => {
        this.$refs.layers.style.transform = "translateY(0)";
      });
      this.statusInput = status;
    },
    exchageSearch() {
      console.log(this.ctrlTxt);
    }
  },
  components: {
    HeaderBg
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#exchange
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  overflow hidden
  .selectB
    margin rem(135) auto rem(9)
    width rem(311)
    height rem(50)
    box-sizing border-box
    padding rem(12) rem(26)
    display flex
    justify-content space-between
    align-items center
    background-color $listBg
    border rem(1) solid $inputBg
    border-radius rem(5)
    .transfor-icon
      width rem(35)
      height rem(35)
      img
        width 100%
        height 100%
    .left-select, .right-select
      width rem(82)
      height rem(27)
      background-color $bodyBg
      border rem(1) solid $inputBg
      border-radius rem(5)
      .select-icon
        width rem(18)
        height rem(9)
        line-height rem(27)
        margin 0 auto
        img
          width 100%
          height 100%
          object-fit contain
      .selectText
        color $myColor
        font-size rem(23)
        .close
          font-size 0
          display inline-block
          width rem(14)
          height rem(14)
          padding rem(2)
          margin-left rem(6)
          img
            width 100%
            height 100%
            object-fit contain
        .types
          vertical-align middle
  .search-btn
    width rem(311)
    line-height rem(30)
    background-color $listBg
    color $fontColor
    font-size rem(15)
    border-radius rem(25)
    margin 0 auto rem(9)
  .lists-container
    border-top rem(1) solid $inputBg
    ul
      margin-top rem(20)
      li
        width 100%
        height rem(59)
        background-color $listBg
        margin-bottom rem(6)
        display flex
        justify-content space-between
        align-items center
        color $fontColor
        box-sizing border-box
        padding 0 rem(20)
        .type-transfor
          display flex
          justify-content flex-start
          span
            font-size rem(15)
            color $typeColor
            font-weight 500
          .trans-icon
            width rem(15)
            height rem(15)
            margin 0 rem(22)
            img
              width 100%
              height 100%
        .transfor-details
          text-align left
          .tranfor-num, .trans-date
            font-size rem(12)
            line-height rem(16)
            .icons
              display inline-block
              width rem(12)
              height rem(12)
              margin-right rem(5)
              vertical-align middle
              img
                width 100%
                height 100%
            span
              vertical-align middle
            .text
              color $tabBarColor
              margin-left rem(5)
  .selectType
    position fixed
    bottom 0
    transform translateY(100%)
    transition 0.5s all
    height rem(444)
    background $tabBarBg
    width 100%
    .bottoms-icon
      margin rem(7) auto 0
      width rem(32)
      height rem(32)
      img
        width 100%
        height 100%
    .layer-title
      font-size rem(15)
      color $colors
      text-align center
      margin rem(14) auto rem(29)
    ul
      display flex
      justify-content space-between
      box-sizing border-box
      padding 0 rem(42)
      li
        .img-box
          width rem(31)
          height rem(31)
          img
            width 100%
            height 100%
        p
          font-size rem(14)
          color $fontColor
          margin-top rem(10)
</style>
